<template>
  <div class="app-content">
    <el-form inline>
      <el-form-item label="登录地址">
        <el-input placeholder="请输入登录地址" v-model="queryParams.address"></el-input>
      </el-form-item>
      <el-form-item label="用户账号">
        <el-input placeholder="请输入用户账号" v-model="queryParams.username"></el-input>
      </el-form-item>
      <el-form-item>
        <ep-button plain svg-icon="Refresh" type="danger" @click="resetQuery">重置</ep-button>
        <ep-button plain svg-icon="Search" type="primary" @click="handleQuery">查询</ep-button>
      </el-form-item>
    </el-form>

    <el-table :data="list" show-overflow-tooltip v-loading="loading">
      <el-table-column align="center" label="序号" type="index" min-width="80"></el-table-column>
      <el-table-column align="center" label="用户账号" prop="username" min-width="120"></el-table-column>
      <el-table-column align="center" label="主机" prop="ip" min-width="150"></el-table-column>
      <el-table-column align="center" label="登录地点" prop="address" min-width="120"></el-table-column>
      <el-table-column align="center" label="会话编号" prop="userId" width="180"></el-table-column>
      <el-table-column align="center" label="浏览器" prop="browser" width="180"></el-table-column>
      <el-table-column align="center" label="操作系统" prop="os" width="120"></el-table-column>
      <el-table-column align="center" label="登录时间" prop="loginTime" width="170"></el-table-column>
      <el-table-column align="center" label="操作" min-width="100" fixed="right">
        <template #default="{ row }">
          <el-link type="primary" @click="handleForceLogout(row)">强退</el-link>
        </template>
      </el-table-column>
    </el-table>

    <EpPagination :total v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize" @pagination="getList" />
  </div>
</template>

<script setup lang="ts">
import { TipModal } from '@/utils'
import { OnlineRequest } from '@/api/monitor/online.request'

/** 表格数据 */
const list = ref<OnlineType.Entity[]>([])
const total = ref<number>(0)
const loading = ref<boolean>(false)
const queryParams = ref({ pageNo: 1, pageSize: 10 } as TableQueryParams<OnlineType.Entity>)

async function getList() {
  try {
    loading.value = true
    const data = await OnlineRequest.findList(queryParams.value)
    total.value = data.total
    list.value = data.records
    loading.value = false
  } catch (error) {
    loading.value = false
  }
}

/** 强退按钮操作 */
async function handleForceLogout(row: OnlineType.Entity) {
  const { cancel } = await TipModal.confirm(`确定要强退用户 ${row.username} 吗？`)
  if (cancel) return TipModal.msg(`操作取消`)
  const actionMsg = await OnlineRequest.forceLogout({ userId: row.userId })
  getList()
  TipModal.msgSuccess(actionMsg || '强退成功')
}

function handleQuery() {
  queryParams.value.pageNo = 1
  getList()
}

function resetQuery() {
  const keys = Object.keys(queryParams.value).filter((key) => key !== 'pageSize')
  keys.forEach((key) => Reflect.deleteProperty(queryParams.value, key))
  handleQuery()
}

getList()
</script>

<style lang="scss" scoped></style>
